<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>报关单生成成功</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="goBack">返回订单列表</el-button>
      </div>

      <!-- 生成结果信息 -->
      <el-result icon="success" title="报关单生成成功！" sub-title="您的报关单已成功生成，相关订单状态已更新。">
        <template slot="extra">
          <el-descriptions title="报关单信息" :column="2" border>
            <el-descriptions-item label="报关单号">{{ customsInfo.customsDeclarationNo || 'CD' + new Date().getTime() }}</el-descriptions-item>
            <el-descriptions-item label="报关单类型">{{ getDictLabel('declarationType', customsInfo.declarationType) }}</el-descriptions-item>
            <el-descriptions-item label="贸易方式">{{ getDictLabel('tradeMode', customsInfo.tradeMode) }}</el-descriptions-item>
            <el-descriptions-item label="运输方式">{{ getDictLabel('transportMode', customsInfo.transportMode) }}</el-descriptions-item>
            <el-descriptions-item label="启运港">{{ customsInfo.departurePort }}</el-descriptions-item>
            <el-descriptions-item label="目的港">{{ customsInfo.destinationPort }}</el-descriptions-item>
            <el-descriptions-item label="预计出口日期">{{ customsInfo.exportDate }}</el-descriptions-item>
            <el-descriptions-item label="处理订单数">{{ orderCount }} 个</el-descriptions-item>
          </el-descriptions>

          <div style="margin-top: 20px;">
            <el-button type="primary" @click="viewDeclarationList">查看报关单列表</el-button>
            <el-button @click="goBack">返回订单列表</el-button>
            <el-button @click="generateMore">继续生成报关单</el-button>
          </div>
        </template>
      </el-result>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "CustomsDeclarationSuccess",
  data() {
    return {
      customsInfo: {},
      orderCount: 0
    };
  },
  created() {
    this.loadResultInfo();
  },
  methods: {
    loadResultInfo() {
      // 从路由参数中获取生成结果信息
      const resultData = this.$route.query;
      if (resultData) {
        this.customsInfo = {
          customsDeclarationNo: resultData.customsDeclarationNo,
          declarationType: resultData.declarationType,
          tradeMode: resultData.tradeMode,
          transportMode: resultData.transportMode,
          departurePort: resultData.departurePort,
          destinationPort: resultData.destinationPort,
          exportDate: resultData.exportDate
        };
        this.orderCount = resultData.orderIds ? resultData.orderIds.split(',').length : 0;
      }
    },

    getDictLabel(type, value) {
      const dictMaps = {
        declarationType: {
          'export': '出口报关单',
          'import': '进口报关单',
          'transfer': '转关报关单'
        },
        tradeMode: {
          'general': '一般贸易',
          'processing': '加工贸易',
          'bonded': '保税仓库',
          'cross_border': '跨境电商'
        },
        transportMode: {
          'air': '空运',
          'sea': '海运',
          'land': '陆运',
          'post': '邮政'
        }
      };
      
      return dictMaps[type] && dictMaps[type][value] ? dictMaps[type][value] : value;
    },

    goBack() {
      this.$router.push('/fiscale/order-management/order-list');
    },

    generateMore() {
      this.$router.push('/fiscale/order-management/order-list');
    },

    viewDeclarationList() {
      this.$router.push('/fiscale/customs-management/declaration');
    }
  }
};
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>